<!-- 经费认领录入页面 -->
<template>
  <!-- S 页头 -->
  <div class="ep-wrapper">
    <!-- S 导航栏 -->
    <van-nav-bar title="经费认领"
                 left-arrow
                 @click-left="goBack"
                 @click-right="goHome"
                 ref="navbar">
      <template #right>
        <van-icon name="wap-home-o" />
      </template>
    </van-nav-bar>
    <!-- E 导航栏 -->

    <!-- E 页头 -->
    <van-form class="main-container"
              @submit="onSubmit">
      <cw-income-analyze-panel :claimInfo="claimInfo"></cw-income-analyze-panel>

      <!-- 项目相关 -->
      <field-group title="项目信息">
        <cw-income-project-selector></cw-income-project-selector>
        <field label="合同金额"
               text="220.0 万元"></field>
      </field-group>

      <!-- 经费相关 -->
      <field-group title="认领经费">
        <!-- 来款类型 -->
        <van-field v-model="formState.incomeType"
                   is-link
                   readonly
                   label="来款类型"
                   placeholder="请选择类型"
                   input-align="right"
                   @click="claimState.incomeTypePickerShow = true" />
        <van-popup v-model:show="claimState.incomeTypePickerShow"
                   round
                   position="bottom">
          <van-picker :columns="claimState.incomeTypeColumns"
                      @cancel="claimState.incomeTypePickerShow = false"
                      @confirm="incomeTypePickerConfirm" />
        </van-popup>
        <!-- 认领金额 -->
        <van-field name="claimFee"
                   v-model="formState.claimFee"
                   label="认领金额"
                   type="number"
                   :placeholder='`可认领${claimInfo.notClaimFee}万元`'
                   input-align="right" />
        <!-- 留校金额 -->
        <van-field name="schoolFee"
                   v-model="formState.schoolFee"
                   label="留校金额"
                   type="number"
                   placeholder='填写认领金额和外拨后自动算出'
                   disabled
                   input-align="right" />
        <van-field name="waibo"
                   label="是否外拨"
                   input-align="right">
          <template #input>
            <van-switch v-model="formState.waibo"
                        size="20" />
          </template>
        </van-field>
        <van-field v-if="formState.waibo"
                   name="waibojine"
                   v-model="formState.waibojine"
                   label="外拨金额"
                   type="number"
                   placeholder="可外拨金额 98万元"
                   input-align="right" />
      </field-group>

      <!-- 发票相关 -->
      <field-group title="填写发票">

        <van-field name="isHasTicket"
                   label="本到款是否已预借发票"
                   input-align="right">
          <template #input>
            <van-switch v-model="formState.isHasTicket"
                        size="20" />
          </template>
        </van-field>

        <van-field name="isOpenerInvoice"
                   label="是否需要开具发票"
                   input-align="right">
          <template #input>
            <van-switch v-model="formState.isOpenerInvoice"
                        size="20" />
          </template>
        </van-field>

        <van-field name="fpCode"
                   v-model="formState.fpCode"
                   label="发票编号"
                   placeholder="请填写发票编号"
                   input-align="right" />

        <!-- todo 开票日期 -->
        <van-field name="fpUnitName"
                   v-model="formState.fpUnitName"
                   label="发票单位名称"
                   placeholder="请填写发票单位名称"
                   input-align="right" />
        <van-field name="transactor"
                   v-model="formState.transactor"
                   label="经办人"
                   placeholder="请填写经办人"
                   input-align="right" />
        <van-field name="transactorPhone"
                   v-model="formState.transactorPhone"
                   label="经办人手机号"
                   placeholder="请填写经办人手机号"
                   input-align="right" />
        <van-field v-if="claimState.ifIPFundShow"
                   name="ifIPFund"
                   label="是否知识产权基金	"
                   input-align="right">
          <template #input>
            <van-switch v-model="formState.ifIPFund"
                        size="20" />
          </template>
        </van-field>
        <van-field name="fileIds"
                   label="请上传电子版公示材料"
                   input-align="right">
          <template #input>
            <van-uploader v-model="claimState.fileList"
                          multiple />
          </template>
        </van-field>

      </field-group>
      <!-- S 底部 -->
      <van-tabbar>
        <van-button type="primary"
                    class="submit-button"
                    native-type="submit"
                    block>确认提交</van-button>
      </van-tabbar>
      <!-- E 底部 -->
    </van-form>
    <!-- E 表单 -->
  </div>

</template>

<script>
import { Toast } from 'vant'
import FieldGroup from '@/components/FieldGroup.vue'
import Field from '@/components/Field.vue'
import { goHome, goBack } from '@/utils/common.js'
import { reactive } from 'vue'
import { submitClaim } from '@/request/api_claim'
import CwIncomeProjectSelector from '@/views/cwIncome/CwIncomeProjectSelector.vue'
import CwIncomeAnalyzePanel from './CwIncomeAnalyzePanel.vue'
export default {
  components: {
    FieldGroup,
    Field,
    CwIncomeProjectSelector,
    CwIncomeAnalyzePanel
  },
  setup () {

    // 来款信息
    const claimInfo = reactive({
      note: '测试费', // 备注
      incomeDate: '20210414 ', // 来款时间
      feeValue: 100, // 来款金额
      notClaimFee: 90, // 可认领金额
      incomeUnit: '天津银行', // 来款单位
      // note: '', // 备注
      // incomeDate: '', // 来款时间
      // feeValue: 0, // 来款金额
      // notClaimFee: 0, // 可认领金额
      // incomeUnit: '', // 来款单位

    })
    // 页面元素状态
    const claimState = reactive({
      // 来款类型
      incomeTypeColumns: ['直接', '间接', '混合'],
      incomeTypePickerShow: false,
      // 否知识产权基金	
      ifIPFundShow: true,
      fileList: []
    })
    // 表单数据集
    const formState = reactive({
      // 认领金额
      claimFee: '',
      // 留校金额
      schoolFee: 0,
      // 是否外拨
      waibo: false,
      // 外拨金额
      waibojine: '',
      // 来款类型
      incomeType: '',
      // 发票单位名称
      fpUnitName: '',
      // 本到款是否已预借发票	
      isHasTicket: false,
      // 是否需要开具发票
      isOpenerInvoice: false,
      // 发票编号	
      fpCode: '',
      // 开票日期	
      kpDate: '',
      // 经办人
      transactor: '',
      // 经办人手机号	
      transactorPhone: '',
      // 备注	
      note: '',
      // 是否知识产权基金	
      ifIPFund: 0,
      // 附件上传id
      'fileIds_upload': ''
    })
    // 来款类型选择器回调
    const incomeTypePickerConfirm = (incomeType) => {
      formState.incomeType = incomeType
      claimState.incomeTypePickerShow = false
    }
    // 表单提交
    const onSubmit = (formData) => {
      Toast.success('提交成功')
      console.log('ok', formData)
      submitClaim(formData).then(response => {
        console.log(response)
        console.log(1)
      }).catch(error => {
        console.log(error)
        console.log(2)
      })
    }
    return {
      claimInfo, goHome, goBack, formState, onSubmit, CwIncomeProjectSelector,
      claimState, incomeTypePickerConfirm
    }
  }

}
</script>

<style scoped>
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
</style>
